
.num {
    font-size: 3vh;
    font-weight: bold;
}
.icon{
    height:5vh;
    margin-left: 10%;
}
.text {
    font-size: 1.2vh;
}

.remark {
    font-size: 1.2vh;
    color: rgb(126,146,171);
}

.layChart{
    width: 100%;
    height: 30vh;
}

.chart {
    width: 100%;
    height: 22vh;
}
.content_item{
    padding: 0 1.5vh;
}
.content_info_item {
    width: 100%;
    height: 28vh;
    position: relative;
}

.yz-content-bg{
    display: flex;
    position: relative;
    background: rgba(0, 234, 255, 0.1);
    border: 3px solid rgba(0, 234, 255, 0.2);
    box-shadow: inset 0 0 14px 6px rgba(0, 234, 255, 0.1);
    border-radius: 14px;
    flex-wrap: wrap;
    margin-top: 0.8vh;
    width: 100%;
    height: 23vh;
}

.body-box-bg{
    display: flex;
    position: relative;
    background: url("img/public/bodyModule/底.png") no-repeat;
    background-size: 100% 100%;
    box-shadow: inset 0 0 14px 6px rgba(0, 234, 255, 0.1);
    flex-wrap: wrap;
    margin-top: 0.8vh;
    width: 100%;
    height: 23vh;
}

.body-box-bg-2{
    display: flex;
    position: relative;
    background: rgba(0, 234, 255, 0.1);
    border: 4px solid rgba(0, 234, 255, 0.2);
    box-shadow: inset 0 0 14px 6px rgba(0, 234, 255, 0.1);
    flex-wrap: wrap;
    margin-top: 0.8vh;
    width: 100%;
    height: 23vh;
    .t-l{
        position: absolute;
        border-top: 3px solid #00EAFF;
        border-left: 3px solid #00EAFF;
        width: 2vh;
        height: 2vh;
        left: -3px;
        top: -3px;
    }
    .t-r{
        position: absolute;
        border-top: 3px solid #00EAFF;
        border-right: 3px solid #00EAFF;
        width: 2vh;
        height: 2vh;
        right: -3px;
        top: -3px;
    }
    .b-r{
        position: absolute;
        border-bottom: 3px solid #00EAFF;
        border-right: 3px solid #00EAFF;
        width: 2vh;
        height: 2vh;
        right: -3px;
        bottom: -3px;
    }
    .b-l{
        position: absolute;
        border-bottom: 3px solid #00EAFF;
        border-left: 3px solid #00EAFF;
        width: 2vh;
        height: 2vh;
        left: -3px;
        bottom: -3px;
    }
}

.content_info {
    width: 30%;
    height: 90vh;
    position: relative;
    padding: 0 1%;
}

.content_map {
    width: 40%;
    height: 90vh;
    position: relative;
}

.content {
    position: absolute;
    top: 10vh;
    display: flex;
    width: 100%;
}

.body-bg{
    width: 100%;
    height: 100vh;
    background: url("img/public/bodyModule/com_bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    min-width: 1280px;
    min-height: 720px;
    color: white;
}

.background {
    width: 100%;
    height: 100vh;
    background: url("img/public/bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    min-width: 1280px;
    min-height: 720px;
    color: white;
}

.sword{
    background: linear-gradient(to bottom, #ffffff, #4eb7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    span{
        -webkit-text-fill-color: white;
    }
}
.yz-map-header{
    display: flex;
    flex-direction: row;
    width:100%;
}
.car_flow {
    display: flex;
    justify-content: center;
    margin: 1vh 0;
    font-size: 14px;
    width: 100%;
    .car_flow_text{
        line-height: 8vh;
        font-size: 2vh;
        padding-left: 1vh;
        font-weight: bolder;
        padding-right: 1vh;
    }
    .car_flow_unit{
        line-height: 8vh;
        font-size: 2vh;
        padding-left: 1vh;
    }
    .car_flow_num {
        font-size: 4vh;
        letter-spacing: 1vh;
        padding-left: 1vh;
        color: #00FFAF;
        display: flex;
        line-height: 8vh;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        align-content: center;
        .perNum {
            background-image: url("../assets/img/yztraffic/数字.png");
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 1vh;
            background-size: 100%;
            width: 3.2vh;
            span{
                position: relative;
                left: 0.5vh;
            }
        }
    }
}

.numbg {
    background: url("../assets/img/yztraffic/数字底.png") no-repeat;
    background-size: 100% 100%;
}

.blueNum{
    background: url("../assets/img/yztraffic/数字底.png") no-repeat;
    background-size: 100% 100%;
    .perNum{
        background-image: url("../assets/img/public/bodyModule/数字.png") !important;
        color: #00FFAF !important;
    }
}

.yz-select-server{
    display: flex;
    justify-content: space-between;
    padding-bottom: 2vh;
}
.yz-box-items{
    display: flex;
    box-shadow: inset 0 0 18px 1px rgba(0,255,255,0.59);
    height: 3vh;
    .yz-box-item{
        display: flex;
        align-content:center;

        .yz-box-item-text{
            width: 46px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            cursor: pointer;
        }
        .yx-box-item-selected{
            background: #35CB9C;
            color: white;
        }
    }
}
.block_select_contain .el-input__wrapper {
    background-color: unset !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 1px #00EAFF inset;
}

.yx-xs-6{
    display: flex;
    width: 50%;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    .yx-car-item{
        width: 60px;
        height: 60px;
    }
    .car{
        background-image: url("../assets/img/yztraffic/小客车.png");
        background-repeat: no-repeat;
        background-position: center;
    }
    .bus{
        background-image: url("../assets/img/yztraffic/大客车.png");
        background-repeat: no-repeat;
        background-position: center;
    }
    .smallChart{
        background-image: url("../assets/img/yztraffic/小货车.png");
        background-repeat: no-repeat;
        background-position: center;
    }
    .bigChart{
        background-image: url("../assets/img/yztraffic/大货车.png");
        background-repeat: no-repeat;
        background-position: center;
    }
    .otherCar{
        background-image: url("../assets/img/yztraffic/其他.png");
        background-repeat: no-repeat;
        background-position: center;
    }
    .whp{
        background-image: url("../assets/img/yztraffic/危化品.png");
        background-repeat: no-repeat;
        background-position: center;
    }
    .yx-car-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 10px;
        .yx-car-content-text{
            font-size: 1.4vh;
            span{
                font-size: 1vh;
                color: #46BFCA;
            }
        }
        .yx-car-content-num{
            padding-top: 2px;
            font-size: 1.8vh;
            font-weight: bolder;
        }
    }
}

.yz-process-items{
    display: flex;
    flex-direction: column;
    font-size: 16px;
    padding: 3vh;
    width: 100%;
    .yz-process-item{
        position: relative;
        display: flex;
        font-size: 14px;
        line-height: 3vh;
        .province{
            font-size: 14px;
            padding-right: 2vh;
        }
        .nums{
            font-size: 14px;
        }
        .process-parent{
            position: absolute;
            top: 1vh;
            left: 12vh;
            right: 1vh;
            padding-right: 4.5vh;
            padding-left: 1.5vh;
            .process{
                height: 10px;
                background: #cccccc;
                border-radius: 3px;
                div{
                    background-image: linear-gradient(90deg, #4485C2 0%, #70A3D1 100%);
                    border-top-right-radius: 3px;
                    border-bottom-right-radius: 3px;
                    height: 10px;
                }
            }
            .rate{
                position: absolute;
                right: -1.2vh;
                top: -1vh;
            }
        }
    }
}

.yz-box-item-colums{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 2vh;
    .yz-box-item-colum{
        display: flex;
        justify-content: center;
        border: 1px solid #35CB9C;
        cursor: pointer;
        .yx-li{
            padding: 0.5vh;
            font-size: 14px;
        }
        .yx-li-select{
            background: #35CB9C;
        }
    }
}

.yz-box2-items{
    display: flex;
    .yz-box2-item{
        border: 2px solid rgba(0,234,255,0.22);
        margin-right: 1vh;
        padding: 0.5vh;
        position: relative;
        border-radius: 1vh;
        .yz-box2-p{
            display: flex;
            justify-content: center;
            .down{
                background: url("../assets/img/yztraffic/down.png") no-repeat;
                width: 14px;
                height: 14px;
                background-size: 100%;
                position: relative;
                top: 4px;
                margin: 0 1vh;
                padding-bottom: 1vh;
            }
            .up{
                background: url("../assets/img/yztraffic/up.png") no-repeat;
                width: 14px;
                height: 14px;
                background-size: 100%;
                position: relative;
                top: 4px;
                margin: 0 1vh;
                padding-bottom: 1vh;
            }
        }
        .center{
            font-size: 1.4vh;
        }
    }
}

.svg-bg{
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    top: 12vh;
}

.video-box-dd{
    font-size: 1.4vh;
    padding-top: 1.4vh;
    cursor: pointer;
    .p{
        padding-top: 2px;
    }
}

.dy-panel{
    position: fixed;
    top: 22.6vh !important;
    width: 100%;
    z-index: 1002;
    .dy-panel-main{
        background: rgba(5, 36, 44, 0.9);
        width: 40% !important;
        min-height: 50vh;
        margin: 0 auto;
        padding-right: 2.5vh;
        padding-bottom: 2.5vh;
        position: relative;
        .dy-panel-header{
            height: 3vh;
            .dy-panel-close{
                position: absolute;
                height: 2.6vh;
                width: 2.6vh;
                background-image: url("../assets/img/public/关闭.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                right: 1vh;
                top: 2vh;
                cursor: pointer;
            }
        }
        .dy-panel-content{
            display: flex;
            padding: 1vh;
            flex-wrap: wrap;
            .dy-panel-item{
                position: relative;
                width: 30%;
                border: 1px solid #407f86;
                margin-left: 2.2vh;
                margin-top: 2.5vh;
                padding: 2vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: pointer;
                .t-l{
                    position: absolute;
                    border-top: 2px solid #00EAFF;
                    border-left: 2px solid #00EAFF;
                    width: 2vh;
                    height: 2vh;
                    left: 0;
                    top: 0;
                }
                .t-r{
                    position: absolute;
                    border-top: 2px solid #00EAFF;
                    border-right: 2px solid #00EAFF;
                    width: 2vh;
                    height: 2vh;
                    right: 0;
                    top: 0;
                }
                .b-r{
                    position: absolute;
                    border-bottom: 2px solid #00EAFF;
                    border-right: 2px solid #00EAFF;
                    width: 2vh;
                    height: 2vh;
                    right: 0;
                    bottom: 0;
                }
                .b-l{
                    position: absolute;
                    border-bottom: 2px solid #00EAFF;
                    border-left: 2px solid #00EAFF;
                    width: 2vh;
                    height: 2vh;
                    left: 0;
                    bottom: 0;
                }
                .dy-panel-icon{
                    width: 3.8vh;
                    height: 3.8vh;
                    background-size: 100% 100%;
                    margin: 2vh 0;
                }
                .dy-panel-text{
                    color: #FFFFFF;
                    font-family: "PingFang SC",serif;
                    font-weight: bolder;
                    font-size: 1.6vh;
                }
            }
        }
    }
}

.pagination-page{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1vh;
    padding: 1vh;
    .cur{
        border: 1px solid #FFFFFF;
        border-radius: 0.5vh;
    }
    .page-first{
        background: url("../assets/img/pageheader/第一页.png") no-repeat;
        width: 18px;
        height: 20px;
        cursor: pointer;
    }
    .page-last{
        background: url("../assets/img/pageheader/上一页.png") no-repeat;
        width: 18px;
        height: 20px;
        margin-left: 1vh;
        cursor: pointer;
    }
    .page-c{
        display: flex;
        .page-c-item{
            margin-left: 1vh;
            cursor: pointer;
            padding: 0 0.4vh;
        }
    }
    .page-next{
        background: url("../assets/img/pageheader/下一页.png") no-repeat;
        width: 18px;
        height: 20px;
        margin-left: 1vh;
        cursor: pointer;
    }
    .page-end{
        background: url("../assets/img/pageheader/最后一页.png") no-repeat;
        width: 18px;
        height: 20px;
        margin-left: 1vh;
        cursor: pointer;
    }
}

.pd_abItems-contain{
    display: flex;
    justify-content: center;
    margin-top: 1vh;
    .pd_abItems-main{
        display: flex;
        border: 1px solid #FFFFFF;
        margin-right: 2vh;
        .pd_abItem-item{
            padding: 0.5vh 1.2vh;
            border-right: 1px solid #FFFFFF;
            cursor: pointer;
            font-size: 1.4vh;
        }
        .selected{
            background: #35CB9C;
            border: 1px solid #35CB9C;
        }
    }
    .pd-abItem-search{
        margin-left: 1vh;
        .pd-abItem-search-btn{
            border: none;
            background: #35CB9C;
            padding: 0.5vh 1.2vh;
            color: #FFFFFF;
            cursor: pointer;
        }
    }
}

.dy-table{
    width: 100%;
    padding-top: 1.4vh;
    min-height: 30vh;
}
.pd-table{
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    thead{
        tr{
            background: #1D4F59;
            font-size: 1.6vh;
            th{
                padding: 0.8vh 0;
            }
        }
    }
    tbody td{
        border: 1px solid #1D4F59 ;
        padding: 0.8vh 0;
        font-size: 1.4vh;
    }
}
.pd-table-transparent{
    thead{
        tr{
            background: transparent;
        }
    }
    tbody td{
        border: 1px solid transparent;
    }
}
.layChart-xs12{
    width: 100%;
    display: flex;
    position: relative;
    padding-bottom: 3vh;
    .layChart-xs6{
        display: flex;
        width: 50%;
        justify-content: center;
        .layChart-xs6-img{
            .cs{
                background: url("../assets/img/sale_more/超市.png") no-repeat;
                background-size: 100%;
                width: 7vh;
                height: 7vh;
            }
            .cy{
                background: url("../assets/img/sale_more/餐饮.png") no-repeat;
                background-size: 100%;
                width: 7vh;
                height: 7vh;
            }
            .yp{
                background: url("../assets/img/sale_more/油.png") no-repeat;
                background-size: 100%;
                width: 7vh;
                height: 7vh;
            }
            .fy{
                background: url("../assets/img/sale_more/油与非油销售占比.png") no-repeat;
                background-size: 100%;
                width: 7vh;
                height: 7vh;
            }
        }
        .layChart-xs6-content{
            font-size: 2.6vh;
            padding: 0 2vh;
            .layChart-xs6-row{
                display: flex;
                .r1{
                    padding-right: 2vh;
                    padding-bottom: 1vh;
                }
            }
            .layChart-xs6-rate2{
                text-align: right;
            }
        }
    }
    .layChart-xs4{
        display: flex;
        width: 33.333%;
        justify-content: center;
        .layChart-xs4-img{
            .yp{
                background: url("../assets/img/sale_more/油.png") no-repeat;
                background-size: 100%;
                width: 7vh;
                height: 7vh;
            }
            .obd{
                background: url("../assets/img/sale_more/obd.png") no-repeat;
                background-size: 100%;
                width: 7vh;
                height: 7vh;

            }
            .fy{
                background: url("../assets/img/sale_more/油与非油销售占比.png") no-repeat;
                background-size: 100%;
                width: 7vh;
                height: 7vh;
            }
        }
        .layChart-xs4-content{
            font-size: 1.8vh;
            padding: 0 2vh;
            .layChart-xs4-row{
                display: flex;
                .r1{
                    padding-right: 1vh;
                    padding-bottom: 1vh;
                }
            }
            .layChart-xs4-rate2{
                text-align: right;
            }
        }
    }
}

.title_background{
    background-size: cover !important;
}

.map-legend {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;

    .map-legend-item {
        display: flex;
        margin-bottom: 1vh;
        margin-right: 2vh;
        font-size: 1.4vh;
        cursor: pointer;

        span {
            padding-left: 1vh;
            position: relative;
            top: 5px;
        }
    }
}
